<template  >
  <div id = 'canvas'></div>
</template>

<script setup>
import { onMounted, onUnmounted, onBeforeUnmount } from 'vue'
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import * as THREE from 'three'  
let scene ,camera,renderer,line
onMounted(()=>{
    init()
})
const init = ()=>{
    let Can = document.getElementById('canvas')
    //场景
    scene = new THREE.Scene()
    scene.background = new THREE.Color(0xffffff)
    //几何体
    const geometry = new THREE.BoxGeometry(100, 100, 100)
    //模型
    //不受光照影响
    // const material = new THREE.MeshBasicMaterial({
    //     color: 0xFF0000,
    //     transparent: true,
    //     opacity: 0.5
    // })
    const masterial = new THREE.MeshLambertMaterial({
        color: 0xFF0000,
        // transparent: true,
        // opacity: 0.5
    })
    //光源(点关原)
    // let pointLight = new THREE.PointLight(0xFF1493,50000.0)
    // pointLight.decay = 0.0
    // pointLight.position.set(-200, 200, 100)
    // scene.add(pointLight)
    //光源辅助控件(点关原)
    // const pointLightHelper = new THREE.PointLightHelper(pointLight, 10)
    // scene.add(pointLightHelper)

    const directionalLight = new THREE.DirectionalLight(0xffffff, 400)
    directionalLight.position.set(200, 0, 100)
    scene.add(directionalLight)
    const directionalLightHelper = new THREE.DirectionalLightHelper(directionalLight, 10 ,0xFF1493)
    scene.add(directionalLightHelper)

    //材料
    const mesh = new THREE.Mesh(geometry, masterial)
    mesh.position.set(0, 0, 0)
    scene.add(mesh)
    //相机
    camera = new THREE.PerspectiveCamera(
        45,
        window.innerWidth / window.innerHeight,
        1,
        500
    )
    camera.position.set(-100, 120, 300)
    camera.lookAt(0, 0, 0)
    //渲染控件
    renderer = new THREE.WebGLRenderer()
    renderer.setSize(window.innerWidth, window.innerHeight)

    //轨道控件
    const controls = new OrbitControls(camera, renderer.domElement)
    controls.addEventListener('change', function () {
        renderer.render(scene, camera)
    })


    //坐标系
    //three.js坐标轴颜色红R、绿G、蓝B分别对应坐标系的x、y、z轴，对于three.js的3D坐标系默认y轴朝上
    const axesHelper = new THREE.AxesHelper(300)
    scene.add(axesHelper)
    renderer.render(scene, camera)
    Can.appendChild(renderer.domElement)
}
onBeforeUnmount(() => {
  destroy(scene, renderer)
})

onUnmounted(() => {
  console.log('Line组件卸载了')
})
</script>

<style>

</style>